<template>
    <div>
        <div class="nav"></div>
        <div class="searchBar" ref="searchBar" style="width:100px;height:100px;overflow:scroll">
            <ul :class="searchBarFixed == true ? 'isFixed' :''"> 
                <li>区域<i class="iconfont icon-jiantouxia"></i></li>
                <li>价格<i class="iconfont icon-jiantouxia"></i></li>
                <li>房型<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>

                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>

            </ul>
        </div>
        <div class="content">
        </div>
    </div>
</template>
<script>
  export default {
    components: {},
    mounted() {
      this.box = this.$refs.searchBar
      var $this = this
      // 监听这个dom的scroll事件
      this.box.onscroll  = () => {
        console.log('on scroll')
        $this.handleScroll()
      }
      console.log(this.box.onscroll)
    },
    data() {
      return {
        searchBarFixed: false
      };
    },
    methods: {
      handleScroll() {
        // var scrollTop =
        //   window.pageYOffset ||
        //   document.documentElement.scrollTop ||
        //   document.body.scrollTop;

        let box = this.$refs.searchBar
        console.log("box.scrolltop:"+box.scrollTop+" box.offsetTop:"+box.offsetTop)
      }
    }
  };
</script>
<style scope>
.nav {
  height: 250px;
}
.content {
  height: 1900px;
}
.searchBar .isFixed{
   
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 999;
  
  
}
</style>